<template>
    <div>
        <el-card>
            <div class="title">用户基本信息</div>
            <el-form label-width="100px">
                <el-form-item label="姓名">
                    <el-input v-model="userInfo.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="登录账号">
                    <el-input v-model="userInfo.loginAccount" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份信息">
                    <el-input v-model="userInfo.identity" disabled></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-avatar :src="userInfo.avatarUrl" style="margin-bottom: 10px;"></el-avatar>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue';
import userAvatar from '/public/kb.jpg'; // 假设头像图片路径


const username = ref('')


const userInfo = reactive({
    name: '柯毕',
    loginAccount: '8209220108',
    identity: '学生', // 根据实际情况填写
    avatarUrl: userAvatar, // 用户头像图片的URL
});
</script>

<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.el-form {
    margin-top: 20px;
}
</style>